import { createApp } from 'vue'
import ElementPlus, { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/main.css'
import App from './App.vue'
import router from './router'

import './access.js'

// import el-icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { zhCn } from 'element-plus/es/locale/index'
import permission from '@/directives/permission.js'
import preventReClick from '@/directives/preventReClick.js'

// import image upload
import ImageUpload from '@/components/ImageUpload'
import ImagePreview from '@/components/ImagePreview'
import { resetForm } from '@/utils/util.js'
import FileUpload from '@/components/FileUpload/index.vue'
import MyEditor from '@/components/MyEditor/index.vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.component('ImageUpload', ImageUpload)
app.component('ImagePreview', ImagePreview)
app.component('FileUpload', FileUpload)
app.component('MyEditor', MyEditor)

app.config.globalProperties.$message = ElMessage


app.config.globalProperties.resetForm = resetForm

//  register permission directive
app.directive('perms', {
  mounted: (el, bindlings) => {
    permission(el, bindlings)
  }
})

// register preventReClick
app.directive('preventReClick', {
  mounted: (el, bindlings) => {
    preventReClick(el, bindlings)
  }
})

app.use(router)
app.use(ElementPlus, {
  locale: zhCn
})
app.mount('#app')
